<template>
	<div class="login-wrap">
		<el-card class="login-container">
			<div slot="header" class="login-title"><p>用户登录</p></div>
			<el-form
				ref="loginForm"
				status-icon
				:model="Form"
				:rules="rules"
				label-width="80px"
			>
				<el-form-item label="用户名" prop="username">
					<el-input
						v-model="Form.username"
						placeholder="请输入用户名"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
					<el-input
						type="password"
						v-model="Form.password"
						show-password
						placeholder="请输入密码"
					></el-input>
				</el-form-item>
				<!-- 验证码组件 -->
				<el-form-item class="verifycode" label="验证码" prop="verifycode">
					<el-input
						v-model="Form.verifycode"
						placeholder="不区大小写"
					></el-input>
					<verify-code @getIdentifyCode="getCode" :key="timer"></verify-code>
				</el-form-item>
				<el-form-item class="btns">
					<el-button type="primary" size="small" @click="login()">
						用户登录
					</el-button>

					<el-button size="small" @click="reset">重置</el-button>
				</el-form-item>
				<p class="p-register">
					<span>还没账号？</span>
					<span class="now" @click="gotoRegister">现在注册</span>
				</p>
			</el-form>
		</el-card>
	</div>
</template>

<script>
import VerifyCode from './VerifyCode.vue';
export default {
	name: 'Login',
	components: {
		VerifyCode,
	},
	data() {
		/* 自定义验证码的校验规则 */
		var checkCode = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('验证码不能为空'));
			} else if (value.toLowerCase() !== this.realCode) {
				callback(new Error('验证码错误'));
			} else {
				callback();
			}
		};
		return {
			realCode: '', //验证码图片上的真实验证码
			timer: '', //定义一个时间戳用于重新加载验证码组件，原理是给验证码组件绑定一个:key
			// 只要key发生变化，则子组件重新渲染
			Form: {
				username: '',
				password: '',
				verifycode: '',
			},
			rules: {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
				],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				verifycode: [{ validator: checkCode, trigger: 'blur' }],
			},
		};
	},

	methods: {
		login() {
			// 校验表单
			this.$refs['loginForm'].validate((valid) => {
				if (valid) {
					// 表单验证成功则发送用户名和密码给数据库,并收到数据库的验证信息
					this.$http.post('/login', this.Form).then((res) => {
						const { code, msg, userType } = res;
						if (code == 0) {
							/* 如果登录的是admin 则跳转到中台 */
							if (this.Form.username == 'admin') {
								this.$confirm(
									'您当前登录的是管理员账号，是否跳转到管理员系统界面',
									'提示',
									{
										confirmButtonText: '确定并跳转',
										cancelButtonText: '取消，重新登陆',
										type: 'warning',
									}
								)
									.then(() => {
										window.open('http://127.0.0.1:5180', '_blank');
										return this.$router.go(0);
									})
									.catch(() => {
										return this.$router.go(0);
									});
							} else {
								// 将数据库生成的token存放在浏览器的localStorage属性中
								/* 将登录状态设置为1 */
								this.$http.put(
									`/online?username=${this.Form.username}&online=1`
								);
								window.localStorage.setItem('token', res.token);
								if (userType == 'user') {
									this.$store.commit('defUserType', true);
								} else if (userType == 'traffic') {
									this.$store.commit('defUserType', false);
								}
								this.$router.push('/');
							}
						} else {
							this.$message.error(msg);
							// 当登录失败要改变验证码
							this.timer = new Date().getTime();
						}
					});
				} else {
					this.$message.error('登录失败');
					// 当登录失败要改变验证码
					this.timer = new Date().getTime();
				}
			});
		},
		reset() {
			this.Form.username = '';
			this.Form.password = '';
			this.Form.verifycode = '';
		},
		gotoRegister() {
			this.$router.push(`/register`);
		},
		getCode(code) {
			this.realCode = code;
		},
	},
	mounted() {},
};
</script>

<style>
.login-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-image: url('img/login.gif');
	background-repeat: no-repeat;
	background-size: cover;
}
.login-container {
	height: 400px;
	width: 400px;
	background: rgba(172, 219, 83, 0.6);
}
.el-card__header {
	height: 10%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(255, 69, 0) !important;
}
.login-title {
	height: 60px;
	width: 400px;
	display: flex;
	align-items: center;
}
.login-title p {
	font-size: 22px;
	font-weight: 900;
	color: white;

	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.el-card__body {
	width: 100%;
	height: 400px;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
}
.el-form-item__label {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}
.verifycode {
	display: flex;
	align-items: center;
	justify-content: center;
}

.verifycode .el-form-item__content {
	width: 280px !important;
	height: 45px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.verifycode input {
	width: 150px;
}
.align {
	width: 50px;
}
.btns {
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btns .el-form-item__content {
	margin: 0 !important;
	padding: 0 !important;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.btns button:hover {
	text-decoration: underline;
	font-weight: 900;
}
.p-register {
	margin-top: 0px !important;
	display: flex;
	justify-content: center;
	font-size: 14px;
	font-weight: 200;
}
.p-register .now {
	font-weight: 700;
	color: red;
	cursor: pointer;
}
.p-register .now:hover {
	text-decoration: underline;
}
/* 输入框右边的绿色勾勾 */
.el-input__suffix {
	color: rgb(48, 242, 48);
	font-weight: 900;
}
</style>
